<template>
    <el-dialog id="compete_export" title="比赛导出" width="60%" :visible.sync="dialogVisible">
        <div>
            <form action="#" class="form-horizontal">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">成绩范围</label>
                                <div class="col-md-9">
                                    <el-input-number v-model="minScore" controls-position="right" :min="1" :max="100" style="width:100px;"></el-input-number>
                                    <span>到</span>
                                    <el-input-number v-model="maxScore" controls-position="right" :min="1" :max="100" style="width:100px;"></el-input-number>
                                    <el-button type="primary" @click="selectBetweenScoreRange(session.SessionCompetes)">选中</el-button>
                                </div>
                            </div> 
                        </div>
                    </div>                     
                </div>
            </form>                       
            <el-table v-if="session!=null" ref="scoreTable" :data="session.SessionCompetes" border stripe
               :default-sort="{prop: 'TotalScore', order: 'descending'}" max-height=500 style="width: 100%"
               @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>                
                <el-table-column align="center" prop="SortIndex" sortable label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="Compete.PassportNo" label="通行证" width="130"></el-table-column>
                <el-table-column align="center" label="姓名/团队">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Compete.Passport != null">{{scope.row.Compete.Passport.User.Name}}</span>
                        <span v-if="scope.row.Compete.Team != null">
                            <li class="fa fa-users"></li>
                            {{scope.row.Compete.Team.Name}}({{scope.row.Compete.Team.Leader.User.Name}})
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="国家地区">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Compete.Team!=null">{{scope.row.Compete.Team.Leader.User | location}}</span>
                        <span v-if="scope.row.Compete.Passport!=null">{{scope.row.Compete.Passport.User | location}}</span>                        
                    </template>
                </el-table-column>                
                <el-table-column align="center" prop="Compete.MusicName" label="曲目"></el-table-column>                
                <el-table-column align="center" prop="TotalScore" label="总成绩" sortable width="120"></el-table-column>
            </el-table>            
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="multipleSelection.length==0" @click="exportCertificate()">导出奖状</el-button>
        </span>            
    </el-dialog>
</template>

<script>

import {LocationStringFormatFromUser}  from 'web/utils';

export default {  
    filters: {
        location: LocationStringFormatFromUser
    },         
    data() {
        return {      
            dialogVisible: false,  
            session: null,
            minScore: 80,
            maxScore: 100,
            rank: 10,
            multipleSelection: []
        }
    },
    methods: {
        showDialog(data) {
            this.dialogVisible = true;
            this.session = data;
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },    

        selectBetweenScoreRange(rows) {
            rows.forEach(row => {
                if(row.TotalScore >= this.minScore && row.TotalScore <= this.maxScore) {
                    this.$refs.scoreTable.toggleRowSelection(row, true);
                } else {
                    this.$refs.scoreTable.toggleRowSelection(row, false);
                }
            });
        },

        exportCertificate() {
            this.multipleSelection.sort((a, b) => Math.sign(b.TotalScore-a.TotalScore));
            this.$SessionService.ExportCertificate(this.session.SessionName, this.multipleSelection, 'certificate');
        }
    }
}
</script>

<style>
#compete_export .form-horizontal .control-label {
    padding-top: 3px;
}
</style>
